<!-- 网络类型列表显示 -->
<template>
    <div>
        <div class="common-layout">
            <el-container>
                <el-aside width="200px" style="padding-top: 3px;max-height: 100%">
                    <div style="border: 1px solid rgb(193, 38, 45);height: 100%;">
                        <!-- 树形列表  :filter-node-method="filterNode"    :props="AreaList" -->
                        <el-input v-model="filterText" style="width: 100%;padding-bottom: 12px;" placeholder="请输入" />

                        <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="AreaList"
                            default-expand-all @node-click="handleNodeClick" :filter-node-method="filterNodes" />
                    </div>
                </el-aside>
                <el-container>
                    <el-header>
                        <!-- 查询条件 -->
                        <div style="width: 100%;padding-top: 20px;border: 1px solid red">
                            <el-form :inline="true" :model="ShowData" class="demo-form-inline" style="text-align: center;">
                                <el-form-item label="类型编号">
                                    <el-input v-model="ShowData.AssemTypeNum" placeholder="请输入网格名称" clearable />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="success" @click="fetchData">搜索</el-button>
                                    <el-button type="warning" @click="chengzho">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-header>
                    <el-main>
                        <el-button type="primary" @click="dialogVisible = true, resetForm(ruleFormRef)">新增</el-button>
                        <br /><br />
                        <!--列表 -->
                        <el-table :data="tableData" style="width: 100%; border: 1px solid red" :row-class-name="tableData">
                            <el-table-column type="index" label="序号" width="100px" align="center" />
                            <!-- <el-table-column prop="treeId.assemTypeName" label="父类型" /> -->
                            <el-table-column prop="assemTypeNum" label="类型编号" />
                            <!-- <el-table-column prop="subordinate" label="所属区域">
                            <template v-slot="scope">
                                <span v-if="scope.row.owning_region == 1">呼兰街道</span>
                                <span v-if="scope.row.owning_region == 2">兰河街道</span>
                                <span v-if="scope.row.owning_region == 3">利民街道</span>
                            </template>
                        </el-table-column> -->
                            <el-table-column prop="assemTypeName" label="类型名称" />
                            <el-table-column label="操作">
                                <template v-slot="scope">
                                    <el-button type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
                                    <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-main>
                </el-container>
            </el-container>
        </div>
        <!-- 分页 -->
        <table style="margin: 5px auto;">
            <tbody>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                            :page-sizes="[15, 20, 25, 30]" background layout="total,slot" :total="page.tatalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                            <span>
                                &nbsp;可以显示{{ page.size }}条，一共{{ page.pageCount }}页，当前是第{{ page.page }}页
                            </span>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                            :page-sizes="[15, 20, 25, 30]" background layout="sizes, slot,prev, pager, next"
                            :total="page.tatalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            prev-text="上一页" next-text="下一页">
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.page" v-model:page-size="page.size"
                            :page-sizes="[15, 20, 25, 30]" background layout="slot,jumper" :total="page.tatalCount"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" prev-text="上一页"
                            next-text="下一页">
                        </el-pagination>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 弹出层 -->
        <el-dialog v-model="dialogVisible" title="新增事件" width="500">
            <span>
                <!-- 表单 -->
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                    class="demo-ruleForm" status-icon>
                    <el-form-item label="父节点类型" prop="pid">
                        <el-select disabled v-model="ruleForm.pid" placeholder="请选择类型信息">
                            <el-option v-for="item in BindSubList" :key="item.id" :label="item.assemTypeName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="类型编码" prop="assemTypeNum">
                        <el-input v-model="ruleForm.assemTypeNum" />
                    </el-form-item>

                    <el-form-item label="类型名称" prop="assemTypeName">
                        <el-input v-model="ruleForm.assemTypeName" />
                    </el-form-item>

                    <el-form-item label="描述" prop="assemTypeDesc">
                        <el-input v-model="ruleForm.assemTypeDesc" style="width: 440px" :rows="2" type="textarea" />
                    </el-form-item>


                    <el-form-item label="图标" prop="assemTypeImg">
                        <el-upload class="avatar-uploader"
                            action="http://10.31.60.18:8000/GriddingSetsRout/api/File/UploadFile" :show-file-list="false"
                            :on-success="handleAvatarSuccess" >
                            <img v-if="ruleForm.assemTypeImg" :src="ruleForm.assemTypeImg" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon">
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="事件级别" prop="assemTypeRank">
                        <el-select v-model="ruleForm.assemTypeRank" placeholder="请选择事件级别">
                            <el-option label="一般" value="一般" />
                            <el-option label="紧急" value="紧急" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="处置时限" prop="assemTimeLimit">
                        <el-select v-model="ruleForm.assemTimeLimit" placeholder="请选择处置时限">
                            <el-option label="工作日" value="工作日" />
                            <el-option label="工作时" value="工作时" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        保存
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
//引入axios
import axios from 'axios';
//引入组件
import { ref, reactive, onMounted, watch } from "vue";

//引入表单组件以及表单的正则验证
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

//引入树形组件
import { ElTree } from 'element-plus'

//引入消息框 添加成功之后的提示
import { ElMessage, ElMessageBox } from 'element-plus'

//引入图标
import { Plus } from '@element-plus/icons-vue'



//关于树形
//关于树形  树形查询
const ruleFormRef = ref<FormInstance>()
    interface Tree {
    [key: string]: any
}
const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

//查询树形列表
const filterNodes = (value: string, ShuTrrList: Tree) => {
    if (!value) return true
    return ShuTrrList.label.includes(value)
}





//文件上传
const handleAvatarSuccess =(res:string)=>{
    ruleForm.assemTypeImg = res;    
}

//定义弹出层的开关  默认是关闭 false
const dialogVisible = ref(false)

//表单
const ruleForm = reactive({
    id: 0,
    pid:0,//treeId.value,//父Id
    assemTypeNum: "", //类型编码
    assemTypeName: "", //类型名称
    assemTypeDesc: "", //描述
    assemTypeRank: "",  //事件级别
    assemTimeLimit: "", //处置时限
    assemTypeImg: "",  //图标
})

//反填方法
const handleEdit = (id: number) => {
    dialogVisible.value = true
    axios.get("http://47.95.178.186:8000/GetLiGriddingRout/api/AssemType/BackSubAssemTypeInfo?Id=" + id).then(res => {
        ruleForm.id = res.data.id;
        BindSubWay(id);
        ruleForm.pid = res.data.pid;
        ruleForm.assemTypeNum = res.data.assemTypeNum;
        ruleForm.assemTypeName = res.data.assemTypeName;
        ruleForm.assemTypeDesc = res.data.assemTypeDesc;
        ruleForm.assemTypeRank = res.data.assemTypeRank;
        ruleForm.assemTimeLimit = res.data.assemTimeLimit;
        ruleForm.assemTypeImg = res.data.assemTypeImg;
    })
}

//删除
const handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put("http://47.95.178.186:8000/SetLiGriddingRout/api/AssemType/FalseDeleteSubAssemTypeInfo?Id=" + id).then(res => {
                if (res.data > 0) {
                    ElMessage.success("删除成功!");
                    fetchData();
                    return;
                } if (res.data > 0) {
                    ElMessage.error("删除失败！");
                    fetchData();
                    return;
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}

//保存按钮
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (ruleForm.id == 0) {
                axios.post("http://47.95.178.186:8000/SetLiGriddingRout/api/AssemType/AddSubAssemTypeInfo", ruleForm).then(res => {
                    if (res.data > 0) {
                        ElMessage.success("新增成功！");
                        dialogVisible.value = false;
                        Area();
                        fetchData();
                        return;
                    } else {
                        ElMessage.error("新增失败！");
                        return;
                    }
                })
            } else {
                axios.put("http://47.95.178.186:8000/SetLiGriddingRout/api/AssemType/UpdateSubAssemTypeInfo", ruleForm).then(res => {
                    if (res.data > 0) {
                        ElMessage.success("修改成功！");
                        dialogVisible.value = false;
                        fetchData();
                        return;
                    } else {
                        ElMessage.error("修改失败！");
                        return;
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
//表单正则验证
const rules = reactive<FormRules>({
    pid: [
        {
            required: true,
            message: '请至少选择一项',
            trigger: 'change',
        },
    ],
    assemTypeNum: [
        { required: true, message: '类型编码不能为空！', trigger: 'blur' },
        { min: 3, max: 20, message: 'Length should be 3 to 20', trigger: 'blur' },
    ],
    assemTypeName: [
        { required: true, message: '类型名称不能为空！', trigger: 'blur' },
        { min: 3, max: 20, message: 'Length should be 3 to 20', trigger: 'blur' },
    ],
    assemTypeDesc: [
        { required: true, message: '描述不能为空！', trigger: 'blur' },
        { min: 3, max: 200, message: 'Length should be 3 to 200', trigger: 'blur' },
    ],
    assemTypeRank: [
        {
            required: true,
            message: '请至少选择一项',
            trigger: 'change',
        },
    ],
    assemTimeLimit: [
        {
            required: true,
            message: '请至少选择一项',
            trigger: 'change',
        },
    ],
})

//弹出层清空按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

//查询的重置按钮
const chengzho = () => {
}

//获取树形的主键
const treeId = ref(0)
const handleNodeClick = (data: Tree) => {
    //console.log(data)
    treeId.value = data.value;

    //加载下拉列表
    BindSubWay(treeId.value);
    //console.log(treeId.value);
}


//分页的参数
const page = reactive({
    page: 1,
    size: 15,
    tatalCount: 0,
    pageCount: 0,
})

//分页方法
const handleSizeChange = (val: number) => {
    page.size = val;
    fetchData();
}
const handleCurrentChange = (val: number) => {
    page.page = val;
    fetchData();
}
//定义显示的集合
const tableData = ref([])

//条件查询的表单
const ShowData = reactive({
    AssemTypeNum: "",  //事件类型编号
});

//异步显示列表
const fetchData = async () => {
    try {
        //response                       http://localhost:5067/api/AssemType/ShowSubAssemInfo?PageIndex=1&PageSize=10
        const res = await axios.get('http://47.95.178.186:8000/GetLiGriddingRout/api/AssemType/ShowSubAssemInfo', {
            params: {
                PageIndex: page.page,
                PageSize: page.size,
                AssemTypeNum: ShowData.AssemTypeNum,
                //Owning_region: ShowData.Owning_region || 0,
            }
        })

        tableData.value = res.data.data
        page.tatalCount = res.data.totalCount
        page.pageCount = res.data.pageCount
    } catch (error) {
        console.error(error)
    }
}

//定义的显示树形下拉的集合
const AreaList = ref([]);
//显示树形
const Area = () => {
    axios.get("http://47.95.178.186:8000/GetLiGriddingRout/api/AssemType/ShowTreeInfo?Pid=0").then(res => {
        AreaList.value = res.data;
        console.log(res.data);
    })
}

//绑定子类型添加页面的父节点下拉框
const BindSubList = ref<{ id: number; assemTypeName: string }[]>([]);
const BindSubWay = (id: number) => {
    //console.log(id)
    axios.get("http://47.95.178.186:8000/GetLiGriddingRout/api/AssemType/BindSubAssem?Id=" + id).then(res => {
        BindSubList.value.push(res.data)
        ruleForm.pid=res.data.id;
        console.log(res.data);
    })
}

//首次加载显示列表信息
onMounted(() => {
    fetchData();
    setTimeout(() => {
        Area();
    }, 600);
})

</script>

<style scoped>
.container {
    /* 设置div居中对齐 */
    width: 100%;
    display: flex;
    justify-content: center;
}

.table-container {
    /* 设置table居中对齐 */
    display: flex;
    justify-content: center;
}
</style>

<!-- /文件上传控件 -->
<style>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>